<!--这里是首页最外层的容器 而整个首页普遍的做法是拆分成一个个小的局部组件 最后集中在home页引用和使用-->
<template>
  <div class="hello">
    <!--引用并声明的局部组件就可以在这里使用组件-->
    <home-header></home-header>
    <home-swiper v-bind:list="swiperList"></home-swiper>
    <home-icons v-bind:list="iconList"></home-icons>
    <home-recommend v-bind:list="recommendList"></home-recommend>
    <home-weekend v-bind:list="weekendList"></home-weekend>
  </div>
</template>

<script>
  //在首页引入拆分的头部组件  轮播组件
  import HomeHeader from './components/Header'
  import HomeSwiper from './components/Swiper'
  import HomeIcons from './components/Icons'
  import HomeRecommend from './components/Recommend'
  import HomeWeekend from './components/Weekend'
  import axios from 'axios'
  //引入vuex 这是一种高级的写法
  import { mapState } from 'vuex'
  export default {
    name: 'Home',
      components:{ //将声明的局部组件    注册到首页的大组件之中
          HomeHeader,
          HomeSwiper,
          HomeIcons,
          HomeRecommend,
          HomeWeekend
      },
    data () {
      return {
        lastCity:'', //定义一个临时缓冲变量
        //A.在父组件中定义数据 以便ajax请求并传递到子组件中
        // city: '',
        swiperList: [],
        iconList: [],
        recommendList: [],
        weekendList: []
      }
    },
    computed: {//计算属性
      ...mapState(['city'])
    },
    methods: { // 函数的定义
      //2.定义的这个方法用于帮助我们ajax的获取
      getHomeInfo () {
        //页面挂载完以后 就去请求ajax的数据

        //请求的接口地址分为在开发环境下和正式环境下定义接口 然后在这里调用（这样可以实现两种环境下请求不同的接口地址）
        axios.get(process.env.API_HOST + '/web_site/index?city=' + this.city)
          .then(this.getHomeInfoSucc)
      },
      //3. 数据请求成功后 就进行获取数据的具体内容
      getHomeInfoSucc (res) {
        res = res.data
        //判断从后端中是否拿到正确的数据
        if (res.ret && res.data) {
          const data = res.data  //定义变量进行接收
          // C.一旦ajax 获取到数据 就需要在父组件中绑定显示出被改动的 city、swiperList的数据了
          // this.city = data.city
          this.swiperList =data.swiperList
          this.iconList = data.iconList
          this.recommendList = data.recommendList
          this.weekendList = data.weekendList
        }
        console.log(res)
      }
    },
    //1.生命周期函数即钩子函数 用于ajax的请求
    mounted () {
      this.getHomeInfo()    //页面挂载完以后 去执行这条语句函数
      this.lastCity = this.city  //当页面被挂载完以后 对上次的城市进行保存
    },
    //当我们在App.vue里面使用了keep-alive这个vue自带的标签，组件中会多出一个生命周期函数 activated
    activated () {
      //当页面重新被激活显示的时候 activated一定会被重新执行 然后再发一次ajax请求
      if (this.lastCity !== this.city) {
        this.getHomeInfo()
        this.lastCity = this.city
      }
    }
  }
</script>

<!-- Stylus来源于Node.js社区，与js关系密切，所以基于Vue.js的开发，我们选择使用Stylus -->
<style lang="stylus" scoped>
</style>

